﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>科室管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>
    <style>
        .nodeover .layui-tree-iconClick,
        .nodeover .layui-tree-txt {
            color: #009688;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md2">

                <div class="layui-card" style="background-color: #f2f2f2;">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto" id="divWorker">
                        <div class="layui-form-item">
                            <label class="layui-form-label">医疗机构：</label>
                            <div class="layui-input-block">
                                <select name="workId" id="workId" lay-filter="workId"></select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="Left" style="overflow: auto;min-height:500px;">
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-md10">

                <div class="layui-card">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">

                        <div class="layui-input-inline">
                            <div class="layui-form-item">
                                <label class="layui-form-label">科室名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="deptname" placeholder="请输入科室名称" autocomplete="off" class="layui-input" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-input-inline">
                            <div class="layui-form-item">
                                <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-dept-front-search" style="width:76px">
                                    查询
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="layui-card-body">
                        <script id="toolbar" type="text/html">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="adddept"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                            </div>
                        </script>
                        <table id="DeptInfoTable" lay-filter="DeptInfoTable"></table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    lobsterlayui.main(['index', 'layer', 'form', 'element', 'treeSelect', 'table', 'laydate', 'upload', 'tree'], {
        data: {
            $layui: null,
            right: null,
            tabledept: null,
            editinfo: null,
        },
        pageload: function (right) {
            this.data.right = right;
            this.loadselectworker(() => {
                this.treeLoad();
                this.loadtabledept();
            });

            if (right.IsAdmin == 0) {
                $('#divWorker').hide();
            }

            this.initevent();
        },
        initevent() {
            var self = this;
            //查询
            layui.form.on("submit(LAY-dept-front-search)", function (data) {
                self.data.tabledept.reload({
                    where: {
                        workid: $("#workId").val(),
                        deptname: data.field.deptname,
                        deptLayer: -1,
                        hosptailid: -1
                    },
                    page: {
                        curr: 1
                    }
                });
            });

            //添加按钮的点击事件
            layui.table.on('toolbar(DeptInfoTable)', function (obj) {
                switch (obj.event) {
                    case 'adddept':
                        var workid = $("#workId").val()
                        self.data.editinfo = { WorkId: workid, Layer: 0 };
                        layer.open({
                            type: 1
                            , title: '添加科室详细信息'
                            , content: $('#dlg_adddept').html()
                            , maxmin: true
                            // , area: ['680px', '440px']  //宽，高
                            , area: ['100%', '100%']  //宽，高
                            , btn: ['保存', '取消']
                            , btn2: function (index, layero) {
                                $("#LAY-dept-form-reset").trigger('click');
                            }
                            , cancel: function () {
                                $("#LAY-dept-form-reset").trigger('click');
                            }
                            , success: function (layero, index) {

                                $('#dlg_WorkId').val($("#workId").val());
                                $('input[name="DeptImg"]').val('/resource/service.jpg');
                                $("#imgUpload").attr('src', '/resource/service.jpg');

                                layui.form.render("select");

                                self.loadselectdeptlayer();
                                self.loadgetdepttype();
                                self.uploadimg();
                            }
                            , yes: function (index, layero) {
                                var submit = $('#LAY-dept-front-submit');

                                //监听提交
                                layui.form.on('submit(LAY-dept-front-submit)', function (data) {
                                    self.savedept(data, index);
                                });
                                submit.trigger('click');
                            }
                        });
                }
            });

            //监听行工具事件
            layui.table.on('tool(DeptInfoTable)', function (obj) {  //tool是工具条事件名，DeptInfoTable是table原始容器的属性
                var data = obj.data;//当前行数据
                var layEvent = obj.event;//获得lay-event的值
                switch (obj.event) {
                    case 'edit':
                        self.data.editinfo = data;
                        layer.open({
                            type: 1
                            , title: '编辑科室详细信息'
                            , content: $('#dlg_adddept').html()
                            , area: ['100%', '100%']  //宽，高
                            , btn: ['保存', '取消']
                            , success: function (layero, index) {

                                self.loadselectdeptlayer(() => {
                                    layui.form.val('layuiadmin-form-depts', data);
                                    layui.form.render("select");
                                    if (data.DeptImg) {
                                        $('input[name="DeptImg"]').val(data.DeptImg);
                                        $("#imgUpload").attr('src', data.DeptImg);
                                    }
                                    else {
                                        $('input[name="DeptImg"]').val('/resource/service.jpg');
                                        $("#imgUpload").attr('src', '/resource/service.jpg');
                                    }
                                });
                                self.loadgetdepttype();
                                self.uploadimg();
                            }
                            , btn2: function (index, layero) {
                                $("#LAY-dept-form-reset").trigger('click');
                            }
                            , cancel: function () {
                                $("#LAY-dept-form-reset").trigger('click');
                            }
                            , yes: function (index, layero) {
                                var submit = $('#LAY-dept-front-submit');

                                //监听提交 
                                layui.form.on('submit(LAY-dept-front-submit)', function (data) {
                                    self.savedept(data, index);
                                });
                                submit.trigger('click');
                            }
                        });
                        break;
                }
                if (obj.event === "disable" || obj.event === "enable") {
                    // 启用停用科室
                    var confirm_msg = "";
                    var status = 0;
                    if (data.DelFlag == 0) {
                        confirm_msg = "确认停用么?";
                        status = 1;
                    }
                    else {
                        confirm_msg = "确认启用么?";
                        status = 0;
                    }
                    var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                    layer.confirm(confirm_msg, { icon: 3, title: "提示" },
                        function (index) {
                            self.stopdept(data, status, index);
                        });
                }
            });

            $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            layui.form.on('select(workId)', function (data) {
                var val = data.value;
                self.treeLoad();
                self.loadtabledept();
            });
        },
        loadselectworker(callback) {
            var self = this;
            //获取机构数据
            lobsterlayui.GET('/admin/v1/worker/GetSelectWorkerDataByUser').then(data => {
                //医疗机构
                var workers = data["Workers"];
                $("#workId").html("");
                $.each(workers, function (i, item) {
                    $("#workId").append("<option value=\"" + item.WorkId + "\">" + item.WorkName + "</option>");
                });

                $('#workId').val(self.data.right.WorkId);//默认选择当前登录机构
                //重新渲染
                layui.form.render("select");

                if (callback) {
                    callback();
                }
            })
        },
        treeLoad() {
            var self = this;
            lobsterlayui.GET('/admin/v1/dept/GetLayerDeptTree', { workId: $('#workId').val() }).then(data => {
                self.viewToTree(data["data"]);
            })
        },
        viewToTree(treelist) {
            var self = this;
            layui.tree.render({
                elem: '#Left',
                isJump: true,
                onlyIconControl: true,
                autoRefresh: true,
                customOperate: true,
                data: treelist,
                edit: [], //操作节点的图标
                operate: function (obj) {
                    var type = obj.type; //得到操作类型：
                    var data = obj.data; //得到当前节点的数据
                    var elem = obj.elem; //得到当前节点元素
                    var id = data.id;
                    var name = data.title;
                },
                click: function (obj) {
                    var data = obj.data;

                    $("#Left .nodeover").removeClass("nodeover");
                    $(obj.elem).find(".layui-tree-main").eq(0).addClass("nodeover");

                    //加载科室表格
                    self.data.tabledept.reload({
                        where: {
                            workid: $("#workId").val(),
                            deptname: $("#deptname").text(),
                            deptLayer: (data.level == 1 ? data.id : -1),
                            hosptailid: (data.level == 0 ? data.id : -1)
                        },
                        page: {
                            curr: 1
                        }
                    });
                }
            });
        },
        loadtabledept() {
            this.data.tabledept = layui.table.render({
                elem: '#DeptInfoTable',
                headers: lobsterlayui.GetHeaderData(),
                where: {
                    workid: $("#workId").val(),  //获取下拉列表值
                    deptname: $("#deptname").text(),  //获取文本值
                    deptLayer: -1,
                    hosptailid: -1
                },
                height: 'full-140',
                cellMinWidth: 80,
                //size: 'sm',
                toolbar: '#toolbar',
                url: '/admin/v1/dept/GetDeptList',
                page: true,
                //even: true,
                cols: [[
                    { field: 'DeptId', title: '编号', width: '8%' },
                    { field: 'Code', title: '科室编码', width: '10%' },
                    { field: 'Name', title: '科室名称', width: '15%' },
                    { field: 'LayerName', title: '分类名称', width: '14%' },
                    { field: 'BranchHospitalName', title: '所属分院', width: '13%' },
                    { field: 'DeptTypeName', title: '科室类型', width: '15%' },
                    { field: 'HIS_DeptId', title: 'his编号', width: '8%' },
                    { field: 'StrDelFlag', title: '状态标识', width: '8%', templet: '#flagTpl' },
                    { field: 'Memo', title: '备注', width: '12%' },
                    { title: '操作', align: 'center', toolbar: '#deptoption', width: '12%', fixed: 'right' }
                ]],
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.count,
                        data: res.data.data
                    }
                }
            });
        },
        stopdept(data, status, index) {
            var self = this;
            lobsterlayui.GET('/admin/v1/dept/stopdept', { deptid: data.DeptId, status: status }).then(data => {
                layer.close(index);
                self.data.tabledept.reload();
            })
        },
        savedept(data, index) {
            var self = this;
            var field = data.field; //获取提交的字段 
            var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
            lobsterlayui.POST('/admin/v1/dept/SaveDeptDetail', field).then(data => {
                layer.msg("保存成功");
                layer.close(index); //关闭弹层 
                self.data.tabledept.reload();
            })
        },
        loadselectdeptlayer(callback) {
            var self = this;
            var workid = $('#workId').val();
            lobsterlayui.GET('/admin/v1/dept/GetDeptLayer', { workid: workid }).then(data => {
                var data = data["data"];
                var html = "<option value=\"\"></option>";
                $.each(data, function (i, item) {
                    html += "<option value=\"" + item.LayerId + "\">" + item.BranchHospitalName+ "|"+item.Name + "</option>";
                });

                $("#Layer").html(html);
                if (self.data.editinfo) {
                    $("#Layer").val(self.data.editinfo.Layer);
                }
                layui.form.render("select");

                if (callback) callback();
            })
        },
        loadgetdepttype() {
            var self = this;
            lobsterlayui.GET('/admin/v1/dept/GetDeptType').then(data => {
                var tpltype = $('#tplDeptType').html();
                var divDeptType = document.getElementById("div_DeptType");
                layui.laytpl(tpltype).render(data, function (html) {
                    divDeptType.innerHTML = html;
                });
                if (self.data.editinfo && self.data.editinfo.DeptTypeCode && self.data.editinfo.DeptTypeCode.length > 0) {
                    var arr = self.data.editinfo.DeptTypeCode.split(',');
                    for (var i = 0; i < arr.length; i++) {
                        $("#" + arr[i]).prop("checked", true)
                    }
                    $("#dlg_DeptTypeCode").val(self.data.editinfo.DeptTypeCode);
                    $("#dlg_DeptTypeName").val(self.data.editinfo.DeptTypeName);
                }
                layui.form.render();
            })

            layui.form.on("checkbox(typeclick)", function (data) {
                var codes = "";
                var names = "";
                var arrcode = [];
                var arrname = [];
                $('input[type=checkbox]:checked').each(function () {
                    arrcode.push($(this).attr("id"));
                    arrname.push($(this).attr("title"));
                });
                codes = arrcode.join(',');
                names = arrname.join(',');
                console.log(codes);
                console.log(names);
                $("#dlg_DeptTypeCode").val(codes);
                $("#dlg_DeptTypeName").val(names);
            })
        },
        uploadimg() {
            layui.upload.render({
                elem: "#btnUpload",
                size: 1024,
                url: "/basic/v1/OSS/UploadFile",
                done: function (res) {
                    if (res.code == 0) {
                        $('#imgUpload').attr("src",  res.data.url); //图片链接（base64） 
                        $("#DeptImg").val(res.data.url);
                    }
                }
            });
        }
    });

</script>
<script type="text/html" id="flagTpl">
    {{#  if(d.StrDelFlag == '已停用'){ }}
    <span style="color:red;">{{ d.StrDelFlag }}</span>
    {{#  } else { }}
    {{ d.StrDelFlag }}
    {{#  } }}
</script>

<script type="text/html" id="deptoption">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    {{#  if(d.StrDelFlag == '已启用'){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable"><i class="layui-icon layui-extend-stop"></i>停用</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>启用</a>
    {{#  } }}
</script>

<script type="text/html" id="dlg_adddept">

    <div class="layui-form" lay-filter="layuiadmin-form-depts" id="layuiadmin-form-depts" style="padding: 5px 0 0 0;">
        <div class="layui-card">
            <div class="layui-card-body box">
                <div class="layui-form-item active">
                    <label class="layui-form-label"><i style="color:red;">*&ensp; </i>科室分类</label>
                    <div class="layui-input-block">
                        <select type="text" id="Layer" name="Layer" lay-filter="Layer" autocomplete="off" lay-verify="required" class="layui-select" lay-search></select>
                    </div>
                </div>

                <div class="layui-form-item active">
                    <label class="layui-form-label"><i style="color:red;">*&ensp; </i>科室名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="Name" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item active">
                    <label class="layui-form-label"><i style="color:red;">*&ensp; </i>科室编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="Code" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item active">
                    <label class="layui-form-label">科室地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="Address" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item active">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="Memo" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item active">
                    <label class="layui-form-label">his科室编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="HIS_DeptId" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item active">
                    <label class="layui-form-label">科室类型</label>
                    <div class="layui-input-block" id="div_DeptType">

                    </div>
                </div>
                <div class="layui-form-item active">
                    <label class="layui-form-label">科室图标：</label>
                    <div class="layui-input-block">
                        <input type="hidden" id="DeptImg" name="DeptImg">
                        <div class="layui-upload">
                            <div class="layui-inline">
                                <button type="button" class="layui-btn" id="btnUpload">选择图片</button>
                                <i style="color:#999;">图片大小不超过1M</i>
                            </div>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" name="imgUpload" id="imgUpload" style="width:90px; height:90px">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item active">
                    <label class="layui-form-label">科室公告</label>
                    <div class="layui-input-block">
                        <textarea name="DeptTips" id="DeptTips" rows="10" autocomplete="off" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item layui-hide active">
                    <input type="text" name="DeptId" id="dlg_DeptId" value="0">
                    <input type="text" name="WorkId" id="dlg_WorkId" value="0">
                    <input type="text" name="DelFlag" id="dlg_DelFlag" value="0">

                    <input type="text" name="DeptTypeCode" id="dlg_DeptTypeCode" value="">
                    <input type="text" name="DeptTypeName" id="dlg_DeptTypeName" value="">
                </div>
                <div class="layui-form-item layui-hide active">
                    <input type="button" lay-submit lay-filter="LAY-dept-front-submit" id="LAY-dept-front-submit" value="保存">
                    <input type="reset" id="LAY-dept-form-reset" value="重置">
                </div>
            </div>
        </div>
    </div>

</script>

<script type="text/html" id="tplDeptType">
    {{# layui.each(d.data, function(index, item){  }}
    <input type="checkbox" id="{{item.Code}}" name="{{item.Code}}" title="{{item.Name}}" lay-skin="primary" lay-filter="typeclick">
    {{# }) }}
</script>